<style>
    #rocket-to-top div {
        left:0;
        margin:0;
        overflow:hidden;
        padding:0;
        position:absolute;
        top:0;
        width:88px;
        background: red;
    }
    #rocket-to-top .level-2 {
        background:url("__ADDONROOT__/images/rocket_button_up.png") no-repeat scroll -88px 0 transparent;
        display:none;
        height:200px;
        opacity:0;
        z-index:1;
    }
    #rocket-to-top .level-3 {
        background:none repeat scroll 0 0 transparent;
        cursor:pointer;
        display:block;
        height:150px;
        z-index:2;
    }
    #rocket-to-top {
        background:url("__ADDONROOT__/images/rocket_button_up.png") no-repeat scroll 0 0 transparent;
        cursor:default;
        display:block;
        height:200px;
        margin:-25px 0 0;
        overflow:hidden;
        padding:0;
        position:fixed;
        right:0;
        top:70%;
        width:88px;
        z-index:11;
    }
    @media (max-width: 768px) {
        .returntop {
            display: none;
        }
    }
</style>
<div class="returntop">
    <div style="display:none;" id="rocket-to-top">
        <div style="opacity:0;display:block;" class="level-2"></div>
        <div class="level-3"></div>
    </div>
    <script>
        $(function() {
            var e = $("#rocket-to-top"),
            t = $(document).scrollTop(),
            n,
            r,
            i = !0;
            $(window).scroll(function() {
                var t = $(document).scrollTop();
                t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
                    marginTop: "-1000px"
                },
                "normal",
                function() {
                    e.css({
                        "margin-top": "-25px",
                        display: "none"
                    }),
                    i = !0
                })) : e.fadeIn("slow")
            }),
            e.hover(function() {
                $(".level-2").stop(!0).animate({
                    opacity: 1
                })
            },
            function() {
                $(".level-2").stop(!0).animate({
                    opacity: 0
                })
            }),
            $(".level-3").click(function() {
                function t() {
                    var t = e.css("background-position");
                    if (e.css("display") == "none" || i == 0) {
                        clearInterval(n),
                        e.css("background-position", "0px 0px");
                        e.css("height", "200px;");
                        return
                    }
                    switch (t){
                    case "0px 0px":
                        e.css("background-position", "-176px 0px");
                        break;
                    case "-176px 0px":
                        e.css("background-position", "-264px 0px");
                        break;
                    case "-264px 0px":
                        e.css("background-position", "-352px 0px");
                        break;
                    case "-352px 0px":
                        e.css("background-position", "-440px 0px");
                        break;
                    case "-440px 0px":
                        e.css("background-position", "-176px 0px");
                    }
                }
                if (!i) return;
                n = setInterval(t, 50),
                $("html,body").animate({scrollTop: 0},"slow");
            });
        });
    </script>
</div>
